import React, { Fragment, memo, useState } from 'react';
import { NavLink } from 'react-router-dom';
import { HotLeaderboardDetailItemWrapper } from './style';

export default memo(function HotLeaderboardDetailItem(props) {

    const [isHover, setHover] = useState(false);
    const [lastHover, setLastHover] = useState(false);
    const { name, index } = props;
    return (
        <HotLeaderboardDetailItemWrapper onMouseOver={() => setHover(true)}
            onMouseOut={() => setHover(false)}>
            <span>{index + 1}</span>
            <NavLink to="/" className="name-link text-nowrap">{name}</NavLink>
            {/* <div className="add-wrapper">
                                <button className="recommend_hot_leaderboard_img play_button"></button>
                                <button className="recommend_hot_leaderboard_img_1 add_button"></button>
                                <button className="recommend_hot_leaderboard_img collect_button"></button>
                            </div> */}
            <div className="add-wrapper">
                {
                    isHover ? <Fragment>
                        <button className="recommend_hot_leaderboard_img play_button" onMouseOver={() => {console.log(`button`)}}></button>
                        <button className="recommend_hot_leaderboard_img_1 add_button"></button>
                        <button className="recommend_hot_leaderboard_img collect_button"></button>
                    </Fragment> : null
                }
            </div>
        </HotLeaderboardDetailItemWrapper>
    )
})
